<template>
  <div class="h-full">
    <n-card title="设备" class="h-full shadow-sm rounded-16px">
      <n-space size="large">
        <vxe-grid v-bind="machineOptions" @cell-click="cellClickEvent"></vxe-grid>
        <n-card title="设备">
          <n-form
            label-placement="left"
            label-width="auto"
            require-mark-placement="right-hanging"
            :style="{
              maxWidth: '640px'
            }"
          >
            <n-form-item label="设备名称">
              <n-input v-model:value="selectedMachine.machineName" />
            </n-form-item>
            <n-form-item label="车间">
              <n-select
                v-model:value="selectedMachine.areaName"
                :options="areas"
                label-field="areaname"
                value-field="areaname"
              />
            </n-form-item>
            <n-form-item label="父级设备">
              <n-input v-model:value="selectedMachine.superMachineName" />
            </n-form-item>
            <n-form-item label="设备类别">
              <n-select
                v-model:value="selectedMachine.machineGroupName"
                :options="machinegroups"
                label-field="machineGroupName"
                value-field="machineGroupName"
              />
            </n-form-item>
          </n-form>
        </n-card>
        <n-card title="操作">
          <n-space vertical>
            <n-button type="primary" :on-click="save">
              <template #icon><icon-mdi:content-save-check-outline /></template>
              保存
            </n-button>
            <n-button type="error" :on-click="deleteMachine">
              <template #icon><icon-mdi:database-remove-outline /></template>
              删除
            </n-button>
          </n-space>
        </n-card>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import { useMessage } from 'naive-ui';
import type { VxeGridProps } from 'vxe-table';
import {
  fetchAreaList,
  fetchDeleteMachine,
  fetchInsertOrUpdateMachine,
  fetchMachineGroupList,
  fetchMachineListByFactory
} from '@/service';

const message = useMessage();
const areas = ref<Factory.Area[]>([]);
const machines = ref<Factory.Machine[]>([]);
const machinegroups = ref<Factory.MachineGroup[]>([]);
const selectedMachine = reactive<Factory.Machine>({
  factoryName: 'JWT',
  areaName: '',
  machineStateName: '',
  machineName: '',
  machineGroupName: ''
});

const machineOptions = reactive<VxeGridProps>({
  border: true,
  size: 'mini',
  height: 650,
  showFooter: false,
  align: 'center',
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'machineName',
      title: '设备名称',
      width: '120',
      sortable: true,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'areaName',
      title: '车间',
      width: '140',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'superMachineName',
      title: '父级设备',
      width: '120',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'machineGroupName',
      title: '设备类别',
      width: '120',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    }
  ],
  toolbarConfig: {
    buttons: [],
    export: false,
    print: false,
    // zoom: true,
    custom: false
  },
  data: machines as any,
  mergeCells: [],
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const cellClickEvent = async ({ row }: { row: any }) => {
  selectedMachine.machineName = row.machineName;
  selectedMachine.areaName = row.areaName;
  selectedMachine.superMachineName = row.superMachineName;
  selectedMachine.machineGroupName = row.machineGroupName;
  // const result = await fetchMdcMaterialHis(row.MATERIALNAME, row.LOTNO, row.WORKORDERID);
};

const getAreaList = async () => {
  const result = await fetchAreaList();
  if (result.data) {
    areas.value = result.data;
  }
};

const getMachineList = async () => {
  const result = await fetchMachineListByFactory('JWT');
  if (result.data) {
    machines.value = result.data;
  }
};

const getMachineGroupList = async () => {
  const result = await fetchMachineGroupList();
  if (result.data) {
    machinegroups.value = result.data;
  }
};

const save = async () => {
  if (selectedMachine.machineName === '') {
    message.warning('信息不得为空');
    return;
  }
  const result = await fetchInsertOrUpdateMachine(selectedMachine);
  if (result.data) message.success('处理成功！');
  getMachineList();
};

const deleteMachine = async () => {
  if (selectedMachine.machineName === '') {
    message.warning('信息不得为空');
    return;
  }
  const result = await fetchDeleteMachine(selectedMachine);
  if (result.data) message.success('处理成功！');
  getMachineList();
};

onMounted(async () => {
  getAreaList();
  getMachineList();
  getMachineGroupList();
});
</script>
